<template>
  <div class="load animated" :load="load" :class="{bounceIn:load,fadeOutUp:!load}">
    <img :src="loadGif" alt="">
  </div>
</template>
<script>
export default {
  data() {
    return {
      loadGif: require('@/assets/img/load.gif')
    }
  },
  props: ['load']
}
</script>

<style lang="less" scoped>
.load {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.load::before {
  content: "";
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;
}

.load img {
  width: 1.2rem;
  display: inline-block;
  vertical-align: middle;
}
</style>
